<template>
  <div v-loading="loading">
    <el-form ref="form" :model="form" :rules="rules" class="dataForm">
      <el-row>
        <el-col :span="12">
          <el-form-item :label="$t('会议主题')" prop="meetingTitle">
            <el-input v-model="form.meetingTitle" :placeholder="$t('会议主题')" show-word-limit maxlength="100" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('会议类型')" prop="meetingType">
            <el-select v-model="form.meetingType" filterable :placeholder="$t('会议类型')" @change="meetingTypeChange">
              <el-option
                v-for="(type, index) in mtTypeOptions"
                :key="index"
                :value="type.id"
                :label="$t(type.mtTypeLabel)"
                class="text"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('开始日期')" prop="startTime">
            <DatePicker
              v-model="form.startTime"
              :placeholder="$t('开始日期')"
            />

          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('会议时间')" prop="meetingTime">
            <el-time-picker
              v-model="form.meetingTime"
              is-range
              clearable
              value-format="HH:mm"
              format="HH:mm"
              range-separator="-"
              :start-placeholder="$t('开始时间')"
              :end-placeholder="$t('结束时间')"
              :placeholder="$t('选择会议时间')"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('常规参与人员')" prop="participants">
            <UserSelect v-model="form.participants" multiple />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('其他内部参与人员')" prop="internalParticipants">
            <UserSelect v-model="form.internalParticipants" multiple />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('会议地点')" prop="meetingAddress">
            <el-select v-model="form.meetingAddress" :placeholder="$t('会议地点')">
              <el-option
                v-for="(item, index) in meetingRoomOptions"
                :key="index"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('秘书')" prop="secretary">
            <UserSelect v-model="form.secretary" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item :label="$t('外部参会人员')" prop="externalParticipants">
            <el-input v-model="form.externalParticipants" type="textarea" :placeholder="$t('外部参会人员')" show-word-limit maxlength="2000" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item :label="$t('会议主要议题')" prop="meetingMainTitle">
            <el-input v-model="form.meetingMainTitle" type="textarea" :placeholder="$t('会议主要议题')" show-word-limit maxlength="2000" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item :label="$t('备注')" prop="remark">
            <el-input v-model="form.remark" type="textarea" :placeholder="$t('备注')" show-word-limit maxlength="2000" />
          </el-form-item>
        </el-col>
      </el-row>
      <div class="area-header">
        <span class="area-header-title">{{ $t('项目上会') }}</span>
      </div>
      <el-table :data="form.mtBusinessDetailList" border>
        <el-table-column :label="$t('项目类型')" align="center" prop="businessType">
          <template slot-scope="scope">
            <el-select v-model="scope.row.businessType" clearable :disabled="scope != null && scope.row.id != null">
              <el-option
                v-for="dict in businessTypeOptions"
                :key="dict.dictValue"
                :value="dict.dictValue"
                :label="$t(dict.dictLabel)"
              />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column :label="$t('项目名称')" align="center" prop="serviceName">
          <template slot-scope="scope">
            <MainBodySelect
              v-model="scope.row.serviceId"
              :parameters="scope.row.businessType"
              :disabled="scope.row != null && scope.row.id != null"
              @change="serviceChange(scope.row)"
            />
          </template>
        </el-table-column>
        <el-table-column :label="$t('会议轮次')" align="center" prop="meetingRounds">
          <template slot-scope="scope">
            <el-input-number v-model="scope.row.meetingRounds" :disabled="scope != null && scope.row.id != null" :controls="false" :placeholder="$t('会议轮次')" />
          </template>
        </el-table-column>
        <el-table-column :label="$t('申请时间')" align="center" prop="applyTime">
          <template slot-scope="scope">
            <DatePicker
              v-model="scope.row.applyTime"
              :placeholder="$t('申请时间')"
              :disabled="scope.row != null && scope.row.id != null"
            />

          </template>
        </el-table-column>
        <el-table-column :label="$t('申请人')" align="center" prop="applicant">
          <template slot-scope="scope">
            <UserSelect
              v-model="scope.row.applicant"
              :placeholder="$t('申请人')"
              :disabled="scope.row != null && scope.row.id != null"
            />
          </template>
        </el-table-column>
        <el-table-column v-if="!otherBtnHide" :label="$t('申请单')" align="center" class-name="small-padding fixed-width" width="60">
          <template v-if="scope.row.dataActId !== null" slot-scope="scope">
            <el-button
              v-hasPermi="['oa:business:edit']"
              size="small"
              type="text"
              icon="el-icon-eye"
              @click="openActForm(scope.row)"
            >{{ $t('查看') }}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div v-if="!otherBtnHide" class="tol">
        <el-button type="primary" icon="el-icon-plus" size="mini" @click="addBusinessDetail">{{ $t("项目上会") }}</el-button>
      </div>
    </el-form>
    <div slot="footer" class="dialog-footer" style="text-align: right;">
      <!--            <el-button @click="cancel()">{{ $t("取消") }}</el-button>-->
      <!--            <el-button v-hasPermi="['oa:business:edit']" type="primary" @click="submitForm('save')">{{ $t("保存") }}</el-button>-->
      <!--            <el-button v-hasPermi="['oa:business:edit']" type="info" @click="submitForm('save')">{{ $t("查看流程") }}</el-button>-->
      <!--            <el-button v-hasPermi="['oa:business:edit']" type="primary" @click="submitForm('process')">{{ $t("保存并发出通知") }}</el-button>-->
      <el-button v-if="form.actStatus" @click="cancel">{{ $t("取消") }}</el-button>
      <FormBtn ref="formBtn" :bus-data="form" has-permi="oa:business" :process-btn="$t('保存并发送通知')" :process-key="form.actStatus ? 'vote_process' : undefined" menu-key="oa_business" />
      <el-button v-if="form.actStatus && !form.voteActStatus" v-hasPermi="['oa:business:edit']" type="primary" @click="submitFormVote('process')">{{ $t("保存并发起投票") }}</el-button>

    </div>

    <!--查看申请单详情-->
    <el-dialog :visible.sync="actFormOpen" :title="$t('流程详情')" :destroy-on-close="true" custom-class="dialogForm" style=" text-align: left;" append-to-body :close-on-click-modal="false" :lock-scroll="false">
      <ProcessInfoForm ref="processInfoForm" />
    </el-dialog>

  </div>
</template>

<script>
import { saveMtBusiness, getMtBusiness, findByPushIdList, afterProcessUpdate } from '@/api/oa/business/mtBusiness'
    import { findAll } from '@/api/oa/type/mtType'
    import { listOaMeetingRoom } from '@/api/oa/meeting/oaMeetingRoom'
    import ProcessInfoForm from '@/views/act/process/processInfoForm'
    import MainBodySelect from '@/components/MainBodySelect/index'
import { getOaMtVoteByMeeting, saveOaMtVote } from '@/api/oa/business/oaMtVote'
    export default {
        components: {
          ProcessInfoForm,
          MainBodySelect
        },
        props: {
          businessDetailIdList: {
            type: Array,
            default: () => []
          }
        },
        data() {
            return {
                otherBtnHide: false,
                // 表单参数
                form: {
                  // 会议时间
                  meetingTime: undefined,
                  // 上会项目
                  mtBusinessDetailList: []
                },
              // 投票表单
              voteForm: null,
                // 遮罩层
                loading: false,
                // 流程表单是否展示
                actFormOpen: false,
                // 会议类型
                mtTypeOptions: [],
                // 会议室设置
                meetingRoomOptions: [],
                // 业务类型
                businessTypeOptions: [],
                // 会议类型
                meetingTypeOptions: [],
                // 表单校验
              rules: {
                meetingTitle: [
                  { required: true, message: this.$t('必填信息'), trigger: 'blur' }
                ], meetingType: [
                  { required: true, message: this.$t('必填信息'), trigger: 'blur' }
                ], startTime: [
                  { required: true, message: this.$t('必填信息'), trigger: 'blur' }
                ], meetingTime: [
                  { required: true, message: this.$t('必填信息'), trigger: 'blur' }
                ], participants: [
                  { required: true, message: this.$t('必填信息'), trigger: 'blur' }
                ], secretary: [
                  { required: true, message: this.$t('必填信息'), trigger: 'blur' }
                ]
              }
            }
        },
        created() {
          this.$bus.$emit('async_done')
          findAll().then(response => {
            this.mtTypeOptions = response.data
           })
          listOaMeetingRoom(null).then(response => {
            this.meetingRoomOptions = response.rows
          })
          this.getDicts('my_business_type').then(response => {
            this.businessTypeOptions = response.data
          })
          this.getDicts('mt_type').then(response => {
            this.meetingTypeOptions = response.data
          })
        },
        methods: {
            // 初始化数据
            init(data) {
                this.loading = true
                if (data != null && data.id !== undefined) {
                    getMtBusiness(data.id).then(response => {
                        this.form = response.data
                        if (this.form.meetingStartTime && this.form.meetingEndTime) {
                          this.form.meetingTime = []
                          this.form.meetingTime.push(this.form.meetingStartTime)
                          this.form.meetingTime.push(this.form.meetingEndTime)
                        }
                      this.loading = false
                      this.getVoteForm(response.data.id)
                    })
                } else {
                    this.reset()
                    if (this.businessDetailIdList.length > 0) {
                      findByPushIdList(this.businessDetailIdList).then(response => {
                        this.form.mtBusinessDetailList = response.data
                        this.loading = false
                      })
                    } else {
                      this.loading = false
                    }
                }
            },
          getVoteForm(meetingId) {
            getOaMtVoteByMeeting(meetingId).then(res => {
              this.voteForm = res.data
            })
          },
            businessTypeFormat(row) {
              return this.selectDictLabel(this.businessTypeOptions, row.businessType)
            },
            meetingTypeFormat(row) {
              return this.selectDictLabel(this.meetingTypeOptions, row.meetingType)
            },
            // 表单重置
            reset() {
                this.form = {
                id: undefined,
                meetingTitle: undefined,
                meetingType: undefined,
                meetingTime: undefined,
                startTime: undefined,
                meetingStartTime: undefined,
                meetingEndTime: undefined,
                participants: undefined,
                internalParticipants: undefined,
                meetingAddress: undefined,
                secretary: undefined,
                externalParticipants: undefined,
                meetingMainTitle: undefined,
                remark: undefined,
                createBy: undefined,
                createTime: undefined,
                updateBy: undefined,
                updateTime: undefined,
                delFlag: undefined,
                mtBusinessDetailList: [],
                  voteActStatus: undefined
                }
                this.resetForm('form')
            },
          openActForm(row) {
            this.actFormOpen = true
            this.$nextTick(() => {
              row.actId = row.dataActId
              this.$refs.processInfoForm.init(row)
            })
          },
            // 取消按钮
            cancel() {
                this.$parent.$parent.formOpen = false
                this.$parent.$parent.reset()
            },
            // 关闭form页面
            closeForm() {
                // 关闭form页面遮罩层
                this.loading = false
                // 关闭form页面
                this.$parent.$parent.formOpen = false
                // 刷新list页面
                this.$parent.$parent.getList()
            },
            /** 提交按钮 */
            submitForm: function(type) {
                if (this.form.meetingTime != null && this.form.meetingTime.length > 1) {
                  this.form.meetingStartTime = this.form.meetingTime[0]
                  this.form.meetingEndTime = this.form.meetingTime[1]
                }
                this.$refs['form'].validate(valid => {
                    if (valid) {
                        this.loading = true
                        saveMtBusiness(this.form).then(response => {
                            if (response.code === 200) {
                                if (type === 'process') {
                                  // 设置数据id方式启动流程后取消并再次启动会创建多条记录
                                  this.form.id = response.data
                                  // 启动流程
                                  this.startProcess(response.data)
                                } else {
                                  this.msgSuccess(this.$t('保存成功'))
                                  this.$emit('resetDetailList')
                                  this.closeForm()
                                }
                            } else {
                                this.msgError(response.msg)
                            }
                            this.loading = false
                        })
                    } else {
                      this.locationError(document)
                    }
                })
           },
          submitFormVote(type) {
            if (!this.voteForm) {
              this.msgError(this.$t('投票错误'))
              return
            }
            saveOaMtVote(this.voteForm).then(response => {
              if (response.code === 200) {
                if (type === 'process') {
                  // 设置数据id方式启动流程后取消并再次启动会创建多条记录
                  this.voteForm.id = response.data.id
                  this.voteForm = response.data
                  // 启动流程
                  this.startProcess(response.data.id, 'vote_process')
                } else {
                  this.msgSuccess(this.$t('保存成功'))
                  this.$emit('resetDetailList')
                  this.closeForm()
                }
              } else {
                this.msgError(response.msg)
              }
              this.loading = false
            })
          },
          // 启动流程
          startProcess: function(dataId, processKey) {
            this.loading = false
            // 启动流程时候传入的参数
            const processData = {}
            // 待办标题
            processData.title = this.form.meetingTitle
            // 业务表名
            processData.dataTable = 'mt_business'
            // 业务ID
            processData.dataId = dataId
            // 业务表单地址
            processData.formPath = '@/views/oa/business/mtBusinessForm'
            // 业务表单打印地址
            processData.viewPath = '@/views/oa/business/mtBusinessView'

            // 菜单标识(根据菜单标识判断的走哪个流程)
            processData.menuKey = 'oa_business'
            if (processKey) {
              processData.title = '投票:' + this.form.meetingTitle
              processData.dataTable = 'oa_mt_vote'
              processData.formPath = '@/views/oa/business/voteForm'
              processData.viewPath = '@/views/oa/business/voteForm'
              processData.processKey = processKey
            }
            this.startProcessByMenu(processData, () => {
              this.form.actStatus = 'D'
              afterProcessUpdate(this.form).then(() => {
                this.msgSuccess(this.$t('数据保存成功,流程启动成功'))
                this.closeForm()
              })
            })
          },
          // 添加上会项目
          addBusinessDetail() {
              const row = {
                id: undefined,
                businessType: undefined,
                businessName: undefined,
                meetingType: undefined,
                meetingRounds: undefined,
                applyTime: undefined,
                applicant: undefined
              }
            if (!(this.form.mtBusinessDetailList instanceof Array)) {
              this.$set(this.form, 'mtBusinessDetailList', [])
            }
            this.$nextTick(() => {
              this.form.mtBusinessDetailList.push(row)
            })
          },
          // 把选择的会议类型的常规参与人员和秘书显示出来
          meetingTypeChange(val) {
            for (let i = 0; i < this.mtTypeOptions.length; i++) {
              if (val === this.mtTypeOptions[i].id) {
                this.form.secretary = this.mtTypeOptions[i].secretary
                this.form.participants = this.mtTypeOptions[i].participants
              }
            }
          },
          serviceChange(row) {
            var count = 0
            for (let i = 0; i < this.form.mtBusinessDetailList.length; i++) {
              if (row.serviceId === this.form.mtBusinessDetailList[i].serviceId) {
                count++
                if (count > 1) {
                  this.msgError(this.$t('同一项目只能选择一次'))
                  this.$set(this.form.mtBusinessDetailList[i], 'serviceId', null)
                  return
                }
              }
            }
          }
        }
    }
</script>

